<template>
	<view>
		<view class="top-bg"></view>
		<view class="content-wrap">
			<view class="form-wrap">
				<map id="myMap" ref="map1" :latitude="info.latitude" :longitude="info.longitude"
					:markers="markers" style="" :enable-scroll="false"></map>
				<view class="form-item yf-flex" style="min-height: 80rpx;">
					<view class="form-label" style="padding-top: 20rpx;width:140rpx">
						打卡位置
					</view>
					<view class="uni-input yf-flex" style="padding: 20rpx 0;">
						<tui-icon name="position" color="#3291F8" size="16"></tui-icon>
						<view class="address-text">
							{{info.address}}
						</view>
					</view>
				</view>
				<view class="form-item yf-flex" style="min-height: 60rpx;">
					<view class="form-label" style="width:140rpx">
						打卡时间
					</view>
					<view class="uni-input yf-flex" style="padding: 0 0 20rpx;"> 
						<view class="address-text">
							{{info.fullDate}}
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label yf-flex-left" style="width: 400rpx;">
						打卡照片
					</view>
					<view class="uni-input" style="padding: 20rpx 0;">
						<image :src="imagePath+info.img" @click="bindImg(imagePath+info.img)" mode="aspectFill"
							class="history-img" v-if="info.img"></image>
					</view>
				</view>
				<view class="form-item" v-if="info.desc">
					<view class="form-label" style="padding-top: 20rpx;">
						工作事由
					</view>
					<view class="uni-input" style="padding: 20rpx 0;">
						{{info.desc||""}}
					</view>
				</view>
			</view> 
		</view>
		<tui-datetime ref="dateTime" @confirm="change"></tui-datetime>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import indexConfig from "@/config/index.config.js"
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js';
	var qqmapsdk = new QQMapWX({
		key: indexConfig.qqmapKey
	});
	export default {
		data() {
			return {
				serverUrl: indexConfig.baseUrl + "api/punch/uploadPic", 
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					iconPath: '/static/common/woman_icon.png',
					width: uni.upx2px(60),
					height: uni.upx2px(60),
				}],
				info: "", //打卡信息
			};
		},
		onLoad(options) {
			this.info = JSON.parse(decodeURIComponent(options.info));
			if (this.info) { 
				this.markers[0].latitude = this.info.latitude;
				this.markers[0].longitude = this.info.longitude;
				this.markers[0].iconPath = this.userInfo.gender == "女" ?
					'/static/common/woman_icon.png' : '/static/common/man_icon.png';
			} 
		},
		computed: {
			...mapState(['userInfo', "imagePath"])
		},
		methods: { 
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			},  
			// 点击图片
			bindImg(img) {
				uni.previewImage({
					urls: [img],
					current: 0
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F8FB;
	}

	.top-bg {
		background: #3291F8;
		width: 100%;
		height: 200rpx;
	}

	.content-wrap {
		padding: 0 30rpx 30rpx;
		margin-top: -168rpx;
		width: 100%;
		
		.form-wrap {
			border-radius: 20rpx;
			background: #fff;
			padding: 22rpx 18rpx 22rpx;
			box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);
			min-height: 90vh;
			#myMap {
				width: 100%;
				height: 494rpx;
			}

			.form-item {
				min-height: 107rpx;

				.form-label {
					font-size: 12+24rpx;
					width: 200rpx;

					.hint {
						color: #FF0000;
					}

					.hint-text {
						color: #7B7B7B;
						font-size: 12+20rpx;
					}
				}

				.uni-input {
					flex: 1;
					font-size: 12+24rpx;   
					.address-text {
						margin-left: 16rpx;
						font-size: 12+24rpx;
					}
					.history-img{
						width: 208rpx;
						height: 120rpx;
					}
				}
			}

			.form-item:last-child {
				border: none
			}

		}

		.submitBt {
			margin-top: 26rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 50rpx;
			color: #fff;
			background: #3291F8;
			font-size: 12+24rpx;
		}
	}
</style>